<template>
  <div>
    <el-card shadow="never">
      <el-row>
        <div @click="visible = true">
          <el-col :span="6">
            <el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
          </el-col>
          <el-col :span="14">
            <h1>姓名</h1>
            <p style="font-size:13px">130****0000</p>
          </el-col>
        </div>
      </el-row>
      <el-row style="margin-top:40px"><p @click="jump('/redEnvelop')">我的红包</p></el-row>
      <el-divider></el-divider>
      <el-row><p @click="jump('/allowance')">我的津贴</p></el-row>
      <el-divider></el-divider>
      <el-row><p @click="jump('/address')">我的地址</p></el-row>
      <el-divider></el-divider>
      <el-row><p @click="jump('/collection')">我的收藏</p></el-row>
      <el-divider></el-divider>
      <el-row><p @click="jump('/service')">我的客服</p></el-row>
      <el-divider></el-divider>
      <el-row><p @click="jump('/ruleCenter')">规则中心</p></el-row>
      <el-divider></el-divider>
      <el-row style="text-align: center;color: grey;font-size: 12px">版本号：1.0.0</el-row>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      :show-close=false
      width="80%"
      center>
      <div @click="visible = false,jump('/')">退出登录</div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Mine",
        data() {
            return {
                visible: false,
            }
        },
        methods: {
            jump(route) {
                this.$router.push(route);
            }
        }
    }
</script>

<style scoped>
  h1 {
    margin: 0;
    font-size: 18px;
  }

  p {
    margin: 0
  }
</style>
